<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
    Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>长图</title>

<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<style type="text/css">
#main {
	width: 80%;
	height: 450px;
	margin: auto;
	padding: 10px;
	background: #cfe1ca;
	border: 10px outset #f9c6aa;
	line-height: 30px;
	color: #9f3c61;
	font-size: 18px;
}

p {
	text-indent: 30px;
}
</style>
<script type="text/javascript">
	var imageFiles = [];
    var context = null;
    var image = null;
    var yy = 0;
    var text11 = "";
	window.onload = function(){
		const fontface = new FontFace('tytsk', `url(腾祥铁山楷书简.TTF)`);
		document.fonts.add(fontface);
		fontface.load();
		const imageInput = document.getElementById('imageInput'); // 获取文件输入元素
		 
		imageInput.addEventListener('change', function() {
			imageFiles = this.files; // 获取所有被选择的文件列表
			console.log(imageFiles[0]);
			/**
			const reader = new FileReader();
			reader.onloadend = function(){
				console.log(reader.result);
				document.getElementById("img").src = reader.result;
				console.log(document.getElementById("img").width)
			}
			reader.readAsDataURL(imageFiles[0]);*/
			
			image = new Image();
		        
	        image.onload = function() {
	            console.log("图片宽度：", this.width);
	            console.log("图片高度：", this.height);
	            
	            // 这里可以根据需要进行其他操作或处理
	        };
	        
	        image.src = URL.createObjectURL(imageFiles[0]); 
	        // document.getElementById("img").src = image.src;
			
		});
	};
	
	function gen(){
		var c = document.createElement("canvas");
		c.width = 768;
		c.height = 30;
		var ctxx = c.getContext("2d");
		ctxx.font = "30px tytsk";
		var ta = document.getElementById("ta");
		wrapText(c.getContext("2d"), ta.value, 512);
		
		var canvas = document.createElement("canvas");
		canvas.width = 768;
		canvas.height = yy;
		context = canvas.getContext("2d");
		context.font = "30px tytsk";
		context.textBaseline = 'middle';
		//context.strokeStyle = '#000000';
		
		//context.drawImage(image, 0, 0, 768, 1024);
		for(var i=0;i<32;i++){
			context.drawImage(image, 0, 0, 768, 1024, 0, i*1024, 768, 1024);
			context.fillStyle="rgba(255,255,255,0.8)";
			context.fillRect(0, i*1024, 768, 1024);
		}
		console.log("yy", yy);
		context.fillStyle="#000";
		wrapText(context, ta.value, 512);
		var img = document.getElementById("img");
		img.src = canvas.toDataURL();
	}
	
	function tryDrawImage(y){
		if(y+30 >= yy){
			yy += 1024;
		}
	}
	
	function wrapText(context, text, maxWidth){
		var words = text.split("");
		var line = "";
		var line2 = "";
		var up = 0;
		var y = 50;
		var x = 128;
		for(var i=0;i<words.length;i++){
			line = line2;
			line2+=words[i]; 
			if (context.measureText(line2).width > maxWidth){
				// 输出
				tryDrawImage(y);
				context.fillText(line, x, y);
				//text11 += line+"\n";
				//context.strokeText(line, x, y);
				y+=45;
				line = "";
				line2 = "";
				i--;
			}else if( words[i]=="\n"){
 				if(line2!="\n"){
					// 输出
					context.fillText(line, x, y);
					//text11 += line+"\n";
					//context.strokeText(line, x, y);
					y+=45;
					tryDrawImage(y);
				}
				
				line = "";
				line2 = ""
			}else if(i == words.length-1){
				tryDrawImage(y);
				// 输出 
				line += words[i]
				context.fillText(line, x, y);
				//text11 += line+"\n";
				line = "";
				line2 = "";
			}
		}
	}
	
</script>
</head>
<body>
	<div>
		背景图片 
		<input type="file" id="imageInput">
	</div>	
	<div>
		小说文本
		<textarea id="ta"></textarea>
	</div>
	<div>
		<button id="genBtn" onclick="gen()">GEN1</button>
	</div>
	<div style="width:100px;height:100px;scroll:auto;border:1px solid blue;">
		<img id="img"/>
	</div>
</body>
</html>